<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="autowidth">
        <Menu :collapsed="collapsed" />
      </el-aside>
      <el-container>
        <el-header class="header-container">
          <div class="header-top1">
            <div class="header-top">
              <el-icon style="font-size: 30px" @click="toggleCollapse">
                <component :is="collapsed ? Expand : Fold"></component>
              </el-icon>
            </div>
            <!-- 面包屑 -->
            <div class="header-crumbs">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" :to="{ path: item.path }">
                  {{ item.meta.title }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>

            <!-- 通知 -->
            <div class="header-inform">
              <el-button plain @click="centerDialogVisible = true" class="header-inform-button">
                <Bell style="width: 1.7em; height: 1.7em; margin-right: 8px" />
              </el-button>

              <el-dialog v-model="centerDialogVisible" title="最新公告" width="1000" align-center>
                {{ inform.infoData }}
                <template #footer>
                  <div class="dialog-footer">
                    <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
                  </div>
                </template>
              </el-dialog>

              <!-- 个人资料 -->
              <el-dialog v-model="headerDialogVisible" title="更新用户信息" width="930px" center>
                <el-form ref="ruleFormRef" style="max-width: 1000px" :model="ruleForm" :rules="rules" label-width="auto"
                  label-position="top" class="demo-ruleForm" :size="formSize" status-icon>
                  <br>
                  <el-form-item label="用户名" prop="user">
                    <el-input v-model="ruleForm.user" disabled />
                  </el-form-item>
                  
                  <el-form-item label="真实姓名" prop="name">
                    <el-input v-model="ruleForm.name" />
                  </el-form-item>
                  <br>
                  <el-form-item label="密码" prop="pass">
                    <el-input v-model="ruleForm.pass" placeholder="不更改请留空" />
                  </el-form-item>
                </el-form>
                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="headerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="headerDialogVisible = false">
                      确定
                    </el-button>
                  </div>
                </template>
              </el-dialog>
            </div>

            <!-- 全屏 -->
            <div class="tabBar-right-icon" @click="fullScreen">
              <el-button>
                <FullScreen style="width: 1.6em; height: 1.6em;" />
              </el-button>
            </div>

            <!-- 退出登录 -->
            <div class="header-flex">
              <el-select placeholder="admin" style="width: 100px;">
                <el-option>
                  <el-button plain @click="headerDialogVisible = true" class="header-select-person">
                    个人资料
                  </el-button>
                </el-option>
                <el-option>
                  <el-button class="drop-out-button">
                    <!-- type="info" @click="logout" -->
                    退出登录
                  </el-button>
                </el-option>
              </el-select>
            </div>
          </div>
        </el-header>
        <br>
        <bar />
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import bar from './Bar.vue'
import Menu from './Menu.vue'

// 引入表单组件
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

// 引入icon组件
import { Expand, Fold } from '@element-plus/icons-vue'
import { ref, computed, reactive, onMounted, inject } from 'vue'

// 定义菜单按钮收缩展开效果
const collapsed = ref<boolean>(false)
const toggleCollapse = () => {
  collapsed.value = !collapsed.value
}

// 定义侧边栏宽度
const autowidth = computed(() => {
  return collapsed.value ? '64px' : '200px'
})

// 全屏方法
const fullScreen = () => {
  let full = document.fullscreenElement
  if (!full) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

// 公告
const centerDialogVisible = ref(false)
const $http = inject('$http')
const inform = reactive({
  infoData: {}
})

async function getInfo() {
  const { data } = await $http.get('/student/getCurrentNewNotice')
  inform.infoData = data || {}
}

onMounted(() => {
  getInfo()
})

//个人资料
const headerDialogVisible = ref(false)

interface RuleForm {
  user: string,
  name: string,
  pass: string
}

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  user: 'admin',
  name: 'admin',
  pass: ''
})

const rules = reactive<FormRules<RuleForm>>({
  user: [{ message: 'Please input Activity name', trigger: 'blur' }],
  name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
  pass: [{ message: 'Please input Activity name', trigger: 'blur' }],
})

// 退出
// function logout() {
//   window.localStorage.clear()
//   router.push('/login')
// }
</script>

<style scoped lang="less">
.common-layout {
  height: 100vh;
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #545c64;
}

.el-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 60px;
  display: flex;
  flex-direction: column;
}

.header-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 20px;
}

.header-top1 {
  display: flex;
  align-items: center;
  width: 100%;
}

.header-top {
  display: flex;
  align-items: center;
}

.header-crumbs {
  flex: 1;
  padding: 0 20px;
}

.header-inform {
  display: flex;
  align-items: center;
}

.header-inform-button {
  border: none;
}

.header-flex {
  display: flex;
  align-items: center;
}

.header-select-person,
.drop-out-button {
  border: none;
}

.tabBar-right-icon {
  display: flex;
  align-items: center;
}
</style>
